import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { CASCADER_OPTIONS } from '../../data';

@Component({
  selector: 'app-input-number-addon',
  standalone: true,
  imports: [
    NzInputNumberModule,
    NzInputModule,
    FormsModule,
    NzSelectModule,
    NzCascaderModule,
  ],
  template: `
    <p class="demo demo-space">
      <nz-input-number-group nzAddOnBefore="+" nzAddOnAfter="$">
        <nz-input-number />
      </nz-input-number-group>

      <nz-input-number-group
        [nzAddOnBefore]="plusOrSub"
        [nzAddOnAfter]="currency"
      >
        <nz-input-number />
      </nz-input-number-group>
      <ng-template #plusOrSub>
        <nz-select [ngModel]="'+'">
          <nz-option nzValue="+" nzLabel="+"></nz-option>
          <nz-option nzValue="-" nzLabel="-"></nz-option>
        </nz-select>
      </ng-template>
      <ng-template #currency>
        <nz-select [ngModel]="'$'">
          <nz-option nzValue="$" nzLabel="$"></nz-option>
          <nz-option nzValue="£" nzLabel="£"></nz-option>
          <nz-option nzValue="€" nzLabel="€"></nz-option>
          <nz-option nzValue="¥" nzLabel="¥"></nz-option>
        </nz-select>
      </ng-template>

      <nz-input-number-group nzAddOnAfterIcon="setting">
        <nz-input-number />
      </nz-input-number-group>

      <nz-input-number-group [nzAddOnBefore]="cascader">
        <nz-input-number />
      </nz-input-number-group>
      <ng-template #cascader>
        <nz-cascader [nzOptions]="options"></nz-cascader>
      </ng-template>
    </p>
  `,
})
export class InputNumberAddonComponent {
  value: number | '' = '';
  options = CASCADER_OPTIONS;
}
